<template>
  <div class="search-card">
    <div class="card-title" :style="{ background: titleBgc }">{{ title }}</div>

    <ul class="card-content">
      <template v-for="(item, index) in details" :key="index">
        <li class="card-content-item" @click.stop="handleSearchItemClick(item)">
          <template v-if="item.avatar">
            <img class="card-content-item-avatar" :src="item.avatar" />
          </template>

          <div class="card-content-item-text t-of-1">{{ item.title ?? item.nickname }}</div>
        </li>
      </template>
      <li class="search-content-more" @click="handleMoreClick" v-if="isMore">
        <div class="search-content-more-box">
          查看更多关于
          <div class="search-content-more-tip t-of-1">
            "{{ searchVal?.length > 0 ? searchVal : '搜索结果' }}"
          </div>
          的内容
        </div>
        <el-icon>
          <ArrowRightBold />
        </el-icon>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
interface IProps {
  title: string
  details: any[]
  titleBgc?: string
  titleColor?: string
  isMore?: boolean
  searchVal?: string
}
withDefaults(defineProps<IProps>(), {
  titleBgc: '#DAE9FF',
  titleColor: '#0075FF',
  isMore: false,
  searchVal: '搜索结果'
})

const emit = defineEmits(['clickSearchItem', 'clickSearchMore'])

const handleSearchItemClick = (payload: any) => {
  emit('clickSearchItem', payload)
}
const handleMoreClick = () => {
  emit('clickSearchMore')
}
</script>

<style lang="less" scoped>
.search-card {
  display: flex;
  flex-direction: column;

  .card-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 40px;
    background: #dae9ff;
    font-size: 16px;
    font-weight: bold;
    color: #0075ff;
    padding-left: 14px;
  }

  .card-content {
    box-sizing: border-box;

    .card-content-item {
      display: flex;
      align-items: center;
      height: 45px;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      cursor: pointer;
      padding: 0 14px;
      box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      .card-content-item-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 13px;
      }

      .card-content-item-text {
        height: 100%;
        line-height: 45px;
      }
    }
    .card-content-item:last-of-type {
      border: none;
    }
    .card-content-item:hover {
      background-color: v-bind(titleBgc);
      color: v-bind(titleColor);
      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    }

    .search-content-more {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 45px;
      padding: 0 14px;
      color: #999999;
      font-weight: 400;
      cursor: pointer;
      transition: color 0.3s ease;

      .search-content-more-box {
        display: flex;
        align-items: center;
        height: 100%;

        .search-content-more-tip {
          display: inline-block;
          max-width: 200px;
        }
      }
    }
    .search-content-more:hover {
      color: #0075ff;
    }
  }
}
</style>
